<template>
	<view @click="goProductDetail" class="itemWrapper-rich">
		<view class="topItem-rich">
			<text class="created-time-rich">{{ orderObj.createTime }}</text>
			<text
				:class="{ 'status-cn': true, isRed: isStatusCnAlertColor }">{{ statusText(orderObj.status,orderObj.payments,orderObj.faceAuthStatus) }}</text>
		</view>

		<!-- 中间位置 -->
		<view :class="{ centerItem: true, noMarginBottom: !showBottomBtns() }">
			<image class="product-image-rich" :src="orderObj.mainImageUrl"></image>
			<view class="right" style="position: relative">
				<text class="top">
					<!-- 续租小标签 -->
					<text v-if="showXuzu" class="xzTag-rich">续租</text>
					<text class="product-name-rich">{{ orderObj.productName }}</text>
				</text>

				<text class="bottom" style="text-align: left">
					商品总额：
					<text class="price-cls-rich">¥{{ orderObj.totalRent }}</text>
				</text>
			</view>
		</view>

		<!-- 底部按钮位置 -->
		<view v-if="showBottomBtns()" class="bottomBtns">
			<OrderActionBtns :orderVO="orderObj"></OrderActionBtns>
		</view>
	</view>
</template>

<script>
	/**
	 *  单个订单的展示组件
	 *  父组件并不需要知道到底应该展示那个子按钮，在这里就把所有组件都堆上去，是否展示，取决于按钮组件内部的逻辑
	 *  如果父组件需要知道到底该显示哪些子按钮的话，那么在父组件就需要通过逻辑确定所需要显示的按钮列表，没必要把这部分逻辑放在父组件
	 *  把所有按钮都堆在这里的话，那么父组件就不需要考虑展示逻辑，通过按钮名字便可以轻松定位到具体应该修改哪个组件文件，然后便可以修改对应逻辑
	 */
	import {
		EMPTY_PLACEHOLDER,
		orderStatusNumber2Cn
	} from '@/utils/constant';
	import {
		checkOrderNeedPay,
		checkOrderNeedShouhuo,
		checkOrderOverdue,
		checkOrderSettle,
		checkOrderHasClose,
		getOrderId
	} from '@/components/orderItem/orderActionBtns/utils/checkShowBtn';
	import OrderActionBtns from './orderActionBtns/orderActionBtns';

	export default {
		name: 'orderItem',

		props: {
			orderObj: {
				type: Object,
				default: {}
			} // 订单对象
		},

		data() {
			return {
				statusList: [{
						status: '01',
						text: '待支付'
					},
					{
						status: '02',
						text: '支付中'
					},
					{
						status: '04',
						text: '待发货'
					},
					{
						status: '05',
						text: '待确认收货'
					},
					{
						status: '06',
						text: '租用中'
					},
					{
						status: '09',
						text: '已完成'
					},
					{
						status: '10',
						text: '已关闭'
					},
					{
						status: '11',
						text: '待审核'
					},
					{
						status: '13',
						text: '待签约'
					},
				]
			};
		},

		components: {
			OrderActionBtns
		},

		computed: {
			/**
			 * 获取到状态的中文名称
			 */
			statusCn: function() {
				const cn = orderStatusNumber2Cn[this.orderObj.status];
				console.log('2222222222--', cn || EMPTY_PLACEHOLDER, this.orderObj.isSendHuo);
				if ((cn || EMPTY_PLACEHOLDER) === '待收货' && this.orderObj.isSendHuo === 1) {
					return '部分发货'
				}
				return cn || EMPTY_PLACEHOLDER;
			},

			/**
			 * 判断是否显示续租
			 */
			showXuzu: function() {
				return this.orderObj?.orderType == '03';
			},

			/**
			 * 判断状态是否是红色
			 */
			isStatusCnAlertColor: function() {
				return checkOrderNeedPay(this.orderObj) || checkOrderNeedShouhuo(this.orderObj) || checkOrderOverdue(
					this.orderObj) || checkOrderSettle(this.orderObj);
			}
		},
		mounted() {
			// console.log('订单右上角的状态文字',this.orderObj.payments);
		},

		methods: {
			statusText(status, payment, faceAuthStatus) {
				if (faceAuthStatus == '01' && status == '13') {
					return '待人脸识别'
				} else {
					if (payment) {
						return '待首付'
					}

					if (this.orderObj.status == '13' && this.orderObj.signState && this.orderObj.signStatusType == 2 &&
						!this.orderObj.gzSignUrl && this.orderObj.gzSignStatus != 1) {
						return '待付公证费'
					}

					if (this.orderObj.status == '13' && this.orderObj.signState && this.orderObj.signStatusType == 2 &&
						this.orderObj.gzSignUrl && this.orderObj.gzSignStatus == 1) {
						return '待签公证'
					}

					let statusName = ''
					this.statusList.forEach(item => {
						if (item.status == status) {
							statusName = item.text
						}
					})
					return statusName
				}
			},
			/**
			 * 判断是否需要显示底部按钮；除了已关闭和待审核的订单外，都要显示
			 */
			showBottomBtns() {
				return !checkOrderHasClose(this.orderObj);
			},

			/**
			 * 跳转到订单详情页面
			 */
			goProductDetail() {
				const orderId = getOrderId(this.orderObj);
				this.$onTo(`/pagesMy/orderDetail-rich/orderDetail-rich?orderId=${orderId}`);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.itemWrapper-rich {
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 20rpx 30rpx;
		background: #ffffff;

	}

	.topItem-rich {
		border-bottom: 2rpx solid #ebebeb;
		padding-bottom: 10rpx;
		position: relative;
		display: flex;
		justify-content: space-between;

		.created-time-rich {
			font-size: 28rpx;
			color: #333333;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;

		}

		.status-cn {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			font-family: PingFangSC-Regular, PingFang SC;

		}

		.isRed {
			color: #e52021;
		}
	}

	.centerItem {
		padding: 20rpx 0;
		border-bottom: 2rpx solid #ebebeb;
		display: flex;
		align-items: flex-start;

		.product-image-rich {
			margin-right: 20rpx;
			flex-shrink: 0;
			width: 160rpx;
			height: 160rpx;
		}

		.right {
			display: flex;
			flex-direction: column;

			.top {
				min-height: 2.85em;
				max-height: 2.85em;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-bottom: 26rpx;
				font-size: 28rpx;

				.xzTag-rich {
					color: #333333;
					padding: 2rpx 6rpx;
					margin-right: 10rpx;
					@include global-background-color();
					border-radius: 15rpx 0rpx 15rpx 0rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					font-size: 22rpx;

				}

				.product-name-rich {
					font-weight: 400;
					color: #333333;
					font-family: Arial;
					font-size: 28rpx;
					line-height: 44rpx;
				}
			}

			.bottom {
				color: #999999;
				text-align: right;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;


				.product-name-rich {
					color: #333333;
					margin-left: 4rpx;
				}
			}
		}
	}

	.bottomBtns {
		margin-top: 20rpx;
	}

	.noMarginBottom {
		margin-bottom: 0 !important;
	}
</style>